<!DOCTYPE html>
<html>
<head>
    <title>Interface Screen 1</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="scripts/dynamicButtons.js"></script>
    <script type="text/javascript" src="scripts/back.js"></script>
    <script type="text/javascript" src="scripts/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.10.3.min.js"></script>
    <script type="text/javascript" src="scripts/checkboxes.js"></script>
    <script type="text/javascript" src="scripts/fade.js"></script>
    <link type="text/css" href="scripts/jquery.toastmessage-min.css" rel="stylesheet"/>
    <script type="text/javascript" src="scripts/jquery.toastmessage-min.js"></script>
    
</head>
<body id="background">
    <div id="content">
		<div class="transparentBg" id="back-button">
			<a onclick="goBack()">
			<img id="back-icon" src="images/back-icon.png" />
			</a>
		</div>

		<div class="transparentBg" id="musicList">
			<div class="centreText"><h2>Settings</h2></div>
			<div id="settings">
			    <p class="tooltips">Activating the various options on this page will customise your streams, and allow them to dynamically adjust to your music preferences!</p>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Scan Emails</label> <!--Removed actual checkboxes because it looked a bit ugly and design wise this makes more sense from a 'trying to tape a small check box with just a finger using glasses is a bit impractical' POV-->
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Scan Texts</label>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Analyse Phone Calls</label>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Integrate Social Media</label>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Import Contacts</label>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Calender</label>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Enable GeoLocation</label>
				<label class="selectable-h"><input type="checkbox" style="visibility: hidden"/>Become Sentient</label><!--Lolwut-->
				<table id="settings-confirm">
				    <tr>
					    <td class="selectable-h" onclick="goBack()">Apply</td>
					    <td class="selectable-h" onclick="goBack()">Cancel</td>
				    </tr>
				</table>
			</div>
		</div>

		<div id="settings-button" class="transparentBg">
			<img id="settings-icon" src="images/settings-icon.png">
		</div>
		
		<div id="navigation-bar" class="transparentBg">
			<div class="navigation-button">
				<a onclick="thumbsdown()" ><img name="thumbsDown" src="images/thumbs/down.jpg" /></a>
			</div>
			<div class="navigation-button">
				<a href="q.html">
				<img src="images/q.jpg" />
				</a>
			</div>
			<div class="navigation-button">
				<a onclick="playPause()" ><img name="playpause" src="images/play.jpg" /></a>
			</div>
			<div class="navigation-button">
				<img src="images/next.jpg" />
			</div>
			<div class="navigation-button">
				<a onclick="thumbsup()" ><img name="thumbsUp"  src="images/thumbs/up.jpg" /></a>
			</div>
		</div>
		
		<div id="cloud-button" class="transparentBg">
			<a onclick="cloudsVisible()"><img id="cloud-icon" src="images/cloud-icon.png"></a>
		</div>
    </div>
</body>
</html>